<!--
 * @Author: maqaing
 * @Date: 2021-09-16 14:07:42
 * @LastEditors: maqiang
 * @LastEditTime: 2021-09-23 14:18:00
 * @Description: 
-->
<template>
  <div>
    <Header></Header>
    <!-- 内容区 -->
    <div class="wrapper">
      <!-- 轮播图 -->
      <div class="swiper">
        <el-carousel :interval="4000" type="card" height="400px">
          <el-carousel-item v-for="s in swiper" :key="s.id">
            <!-- <h3 class="medium">{{ item }}</h3> -->
            <img :src="s.url" alt="" />
          </el-carousel-item>
        </el-carousel>
        <!-- {{ swiper }} -->
      </div>
      <div class="content">
        <!-- 版块 -->
        <div class="plates" v-for="item in Article" :key="item.id">
          <div class="plate">
            <div class="header">
              <div class="title">{{ item.category.name }}</div>
              <div class="more">更多&gt;&gt;</div>
            </div>
            <!-- 列表区域 -->
            <ul class="list">
              <li @click="toArc(arc)" v-for="arc in item.aritcle" :key="arc.id">
                {{ arc.title }}
              </li>
              <!-- <li>山西农业大学2021年急需紧缺专业人才招聘笔试公告</li>
              <li>
                黄土高原特色作物优质高效生产省部共建协同创新中心2021年开放基金项目立项公示
              </li> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <div class="footer">
        <div>太原龙湖校区</div>
        <div>邮编</div>
        <div>地址：山西太原龙城大街8号</div>
        <div>山西农业大学党委宣传部</div>
    </div>
  </div>
</template>

<script>
import { get } from "../utils/request";
import Header from "./components/Head.vue";
export default {
  components: {
    Header,
  },
  data() {
    return {
      swiper: [],
      Article: [],
    };
  },
  methods: {
    getSwiperData() {
      get("/index/carousel/findAll").then((res) => {
        // 轮播图
        // console.log(res.data);
        this.swiper = res.data;
      });
    },
    getArticleData() {
      get("/index/article/findCategoryArticles").then((res) => {
        console.log(res);
        this.Article = res.data;
      });
    },
    toArc(arc) {
      this.$router.push({
        path:'/article',
        query: arc
      })
    },
  },
  created() {
    // 执行轮播图
    this.getSwiperData();
    // 文章子栏目
    this.getArticleData();
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #ecf6f2;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .plates {
    margin: 20px;
    flex-wrap: nowrap;
    background-color: #ffffff;
    width: 450px;
    box-sizing: border-box;
    .plate {
      .header {
        display: flex;
        justify-content: space-between;
        color: black;
        margin: 0 10px;
        font-size: 30px;
        .title {
          cursor: pointer;
        }
        .more {
          cursor: pointer;
        }
      }
      .list {
        li {
          line-height: 2em;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
          margin: 10px;
          font-size: 40px;
        }
      }
    }
  }
}
.footer{
  height: 200px;
  background-color:#028b39;
  div{
    margin-left: 20px;
    font-size: 20px;
    color: white;
  }
}
</style>